<template>
  <div class="yxp">
    <div class="yxp-wordList-top">
      <div class="back" id="yxp-review-back" @click="handleBack">
        <span></span>
      </div>
      <span class="yxp-top-c">自主复习</span>
      <div class="yxp-top-r">
        <div class="success">
          <img src="@/assets/word/success-icon.png" />{{canArr.length}}词
        </div>
        <div class="error">
          <img src="@/assets/word/error-icon.png" />{{canNotArr.length}}词
        </div>
        <div class="btn" id="yxp-review-submit" @click="handleSubmit">提交</div>
      </div>
    </div>
    <div class="yxp-word-box" id="wordBox">
    <div class="yxp-wordList-box">
      <div class="yxp-wordList-box-item">
        <div class="yxp-wordList-main">
          <div class="yxp-wordList-item list-item" v-for="(item,i) in dataList" :key="item.id" @click="handlePlay(item,i)">
            <div class="yxp-wordList-item-l" :class="{active: item.num > 0 && curIndex === i}">
              <span class="word-en">{{item.word}}</span>
              <span class="word-zh" v-show="item.num === 2 && curIndex === i">{{item.translate}}</span>
            </div>
            <div class="yxp-wordList-item-r">
              <div class="success img1" v-show="item.isSuccess" :id="'yxp-review-success'+item.word" @click.stop="handleSelectSuccess(i,item)"></div>
              <div class="success img2" v-show="!item.isSuccess" :id="'yxp-review-success1'+item.word" @click.stop="handleSelectSuccess(i,item)"></div>
              <div class="success img3" v-show="!item.isError" :id="'yxp-review-error'+item.word" @click.stop="handleSelectError(i,item)"></div>
              <div class="success img4" v-show="item.isError" :id="'yxp-review-error1'+item.word" @click.stop="handleSelectError(i,item)"></div>
            </div>
          </div>
          <span
              class="yxp-wordList-page-btn btn-hover"
              id="word-list-more:btn"
              v-show="dataList.length >= 20 && !isFinished"
              @click="handleMoreClick"
              >加载更多</span
            >
        </div>
      </div>
    </div>
    <Empty v-if="isNone" />
  </div>
    <audio ref="audio"></audio>
    <div class="mark" v-if="isShow"></div>
    <div class="yxp-wordList-pop" v-if="isShow">
      <img src="@/assets/word/close-icon.png" class="close" @click="isShow = false" />
      <p class="tips">是否放弃复习</p>
      <div class="btn">
        <span class="btn-item" id="yxp-review-sure" @click="handleSure">确定</span>
        <span class="btn-item" id="yxp-review-reset" @click="handleReset">取消</span>
      </div>
    </div>
      <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import Empty from '@/components/Empty.vue'
import { getreviewWords, distingUishword ,doubleminusdistinguiShword} from '@/services/word.js'
import Timetips from "@/components/Timetips";
export default {
  name: 'smartIndex',
  components: {
    Empty,
    Timetips
  },
  data() {
    return {
      isShow: false,
      package_id: 0,
      title: '',
      square_type: 0,
      dataList: [],
      canArr: [],
      canNotArr: [],
      pageIndex: 1,
      pageSize: 20,
      total: 0,
      detail: '',
      isFinished: false,
      isNone: false, // 空页面,
      is_doubleminus:sessionStorage.getItem('doubleminus_type')
    }
  },
  created () {
    if (this.$route.query) {
      let query = this.$route.query
      this.package_id = query.package_id
      this.title = query.title
    }
    this.getWordList()
  },
  mounted () {
    // window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () {
    delete window.__LIMIT_TIME__
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
  methods: {
    async getWordList () {
      this.$loading.show()
      let params = {
        package_id: this.package_id,
        page: this.pageIndex
      }
      let data = await getreviewWords(params)
      if (data.code === 1) {
        this.$loading.hide()
        if (data.data.to_study.length === 0) {
          if (this.pageIndex === 1) {
            this.isNone = true
          } else {
            this.isFinished = true
           // window.removeEventListener('scroll', this.handleScroll, true)
          }
          return
        }
        data.data.to_study.map(item => {
          item.num = 0
          item.isSuccess = false
          item.isError = false
        })
        this.dataList = [...this.dataList,...data.data.to_study]
        this.total = data.data.total
        this.detail = data.data.detail
        if (this.dataList.length < 7) {
              this.isFinished = true
            } else {
              this.isFinished = false
            }
      } else if (data.code === '10001' || data.code === 10001) {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    handleScroll() {
      console.log(this.isFinished + '滚动')
      let scrollDom = document.getElementById('wordBox')
      if (scrollDom.scrollTop > 0) {
        if (scrollDom.clientHeight + parseInt(scrollDom.scrollTop) >  scrollDom.scrollHeight - 10) {
          let page = Math.ceil(this.total / this.pageSize);
          if (!this.isFinished) {
            this.pageIndex++
            if (this.pageIndex > page) {
                this.pageIndex = page
                this.isFinished = true
                return
              }
            this.isFinished = true
            this.getWordList()
          }
        }
      }
    },
    handleMoreClick () {
      let page = Math.ceil(this.total / this.pageSize);
      if (!this.isFinished) {
        console.log('-=-=-=-=-')
        this.pageIndex++
        if (this.pageIndex > page) {
            this.pageIndex = page
            this.isFinished = true
            return
          }
        this.isFinished = true
        this.getWordList()
      }
    },
    handleSelectSuccess (i, item) {
      if (item.isSuccess) return
      let obj = this.dataList[i]
      this.$set(obj, 'isError', false)
      this.$set(obj, 'isSuccess', true)
      if (this.canArr.indexOf(item.id) === -1) {
        this.canArr.push(item.id)
      }
      if (this.canNotArr.indexOf(item.id) > -1) {
        let index = this.canNotArr.indexOf(item.id)
        this.canNotArr.splice(index, 1)
      }
    },
    handleSelectError (i, item) {
      if (item.isError) return
      let obj = this.dataList[i]
      this.$set(obj, 'isSuccess', false)
      this.$set(obj, 'isError', true)
      if (this.canNotArr.indexOf(item.id) === -1) {
        this.canNotArr.push(item.id)
      }
      if (this.canArr.indexOf(item.id) > -1) {
        let index = this.canArr.indexOf(item.id)
        this.canArr.splice(index, 1)
      }
    },
    async handleSubmit () {
      if (this.canArr.length === 0 && this.canNotArr.length === 0) {
        this.$toast('还没有选词哦~')
        return
      }
      this.$loading.show()
      let params = {
        can: this.canArr.join(','),
        can_not: this.canNotArr.join(','),
        type: 'review',
        package_id: this.package_id,
        times: 2,
        f_type: 1
      }
      let data = '';
      if(this.is_doubleminus == 1){
        data = await doubleminusdistinguiShword(params)
      }else{
        data = await distingUishword(params)
      }
      if (data.code === 1) {
        this.$loading.hide()
        if (data.data.is_finish === 1) {
          if(data.data.complete >= 3){
            this.$router.push({
              path: '/wordRemember/wordReport',
              query: {
                id: data.data.resid,
                type:1,
                is_finish:data.data.is_finish,
                content:data.data.content
              }
            })
          }else{
            this.$router.push({
              path: '/wordRemember/wordGrade',
              query: {
                path: window.encodeURIComponent(data.data.url),
                package_id: this.package_id,
                is_finish:data.data.is_finish,
                title: this.title
              }
            })
          }
        } else {
          this.$router.replace({
            path: '/wordRemember'
          })
        }
      } else {
        this.$loading.hide()
      }
    },
    // 播放语音
    handlePlay (item, i) {
      console.log(111)
      this.curIndex = i
      let num = item.num
      num++
      if (num > 2) num = 1
      this.$set(item, 'num', num)
      let audio = this.$refs.audio
      audio.src = item.project_voice
      audio.play()
      this.dataList.map((elem,index) => {
        if (index !== i) {
          this.$set(elem, 'num', 0)
        }
      })
    },
    handleBack () {
      this.isShow = true
    },
    handleSure () {
      this.$router.push({
        path: '/wordRemember'
      })
    },
    handleReset () {
      this.isShow = false
    },
    handleClose () {
      this.isShow = false
    }
  }
}
</script>
<style lang="less" scoped>
.yxp-wordList-top {
  .yxp-top-r {
    .success {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #27BFA3;
      margin-right: 29px;
      img {
        width: 20px;
        height: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .error {
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #FF6767;
      margin-right: 29px;
      img {
        width: 18px;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .btn {
      width: 140px;
      height: 46px;
      line-height: 46px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background:linear-gradient(359deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
      box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      border-radius: 30px;
      cursor: pointer;
      &:hover {
        background:linear-gradient(360deg,rgba(39,178,152,1) 0%,rgba(52,203,163,1) 100%);
        box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      }
    }
  }
}
.yxp-wordList-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 360px;
  height: 270px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
  .tips {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    padding-top: 96px;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 53px;
    .btn-item {
      width: 130px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background:linear-gradient(359deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
      box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      border-radius: 100px;
      cursor: pointer;
      &:first-child {
        margin-right: 20px;
      }
      &:hover {
        background: #18A38A;
      }
    }
  }
}

</style>
